<template>
	<div class='cart-item'>
		<div>
			<div class='checkbox' @click="selectGoods(cartItem.cart_id)" :data-identification='cartItem.identification' v-if="cartItem.is_select">
				<span class="icon icon-check" v-if="cartItem.is_select"></span>
			</div>
			<!--搭配商品  -->
			<div class='checkbox macth' @click="selectGoods(cartItem.cart_id)" v-else>
				<span class="icon icon-is-check"></span>
			</div>
		</div>
		<!--<div class='lose-efficacy' wx:else>失效</div>-->
		<router-link :to="cartItem.url" class='cart-item-content'>
			<img :src='cartItem.goods_image' class='goods-img'></img>
			<div class='cart-item-intro'>
				<span class='cart-item-title'><span class='match-sign' v-if="cartItem.cart_label" >{{cartItem.cart_label}}</span>{{cartItem.goods_name}}</span>
				<span class='sub-title'>{{cartItem.spec_name}}</span>
				<span class='price'>{{cartItem.goods_price}}/{{cartItem.units}}</span>
				<div class='goods-ctrl'>
					<div class='goods-count'>
						<img class='ctrl-minus' src='../../../../static/img/minus.png' @click.stop.prevent='minusCartItem(cartItem)' :data-cart-id='cartItem.cart_id'></img>
						<span class='goods-num'>{{cartItem.goods_num}}</span>
						<img class='ctrl-add' src='../../../../static/img/plus.png' @click.stop.prevent='addCartItem(cartItem)' :data-cart-id='cartItem.cart_id'></img>
					</div>
					<img src='../../../../static/img/del.png' class='icon-del' @click.stop.prevent="delCartItem(cartItem)" :data-identification='cartItem.identification' :data-cart-id='cartItem.cart_id'></img>
				</div>
			</div>
		</router-link>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions } from 'vuex';
	
	import server from "../../../server/api"
	export default {
		props: ["cartItem"],
		data() {
			return {}
		},
		mounted() {},
		created() {

		},
		computed: {
			...mapState(['shoppingList'])
		},
		methods: {
			selectGoods(id){
				for(var i = 0;i < this.shoppingList.length;i++){
					if(id == this.shoppingList[i].cart_id){
						this.shoppingList[i].is_select = !this.shoppingList[i].is_select;
						if(this.shoppingList[i].is_select){
							this.$emit("addAllMoney",this.shoppingList[i].goods_num*this.shoppingList[i].goods_price)
						}else{
							this.$emit("addAllMoney",-this.shoppingList[i].goods_num*this.shoppingList[i].goods_price)
						}
					}
				}
			},
			editGoodsNumber(cartItem) {
				server.post("/index/cart/cart_edit_quantity", {
					member_id: 101076,
					cart_id: cartItem.cart_id,
					goods_id: cartItem.goods_id,
					goods_num: cartItem.goods_num
				}, function(res) {
					console.log(res)
				})
			},
			minusCartItem(cartItem) {
				if(cartItem.goods_num > 1) {
					cartItem.goods_num--;
					this.editGoodsNumber(cartItem);
				} else {
					alert("再减就没了")
				}
			},
			addCartItem(cartItem) {
				cartItem.goods_num++;
				console.log(cartItem)
				this.editGoodsNumber(cartItem);
			},
			delCartItem(cartItem) {
				var _this = this;
				// 从vuex中找到数据，然后删除。
				this.$store.state.shoppingList.map(function(ele, index) {
					console.log(index)
					if(cartItem.cart_id == ele.cart_id) {
						_this.$store.state.shoppingList.splice(index, 1);
					}
				})
				// 删除商品
				server.post("/index/cart/cart_del", {
					member_id: 101076,
					cart_id: cartItem.cart_id,
				}, function(res) {
					console.log(res)
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	/*购物车有商品  */
	
	.cart-item {
		display: flex;
		align-items: center;
		padding: 60px 0;
		margin: 0 40px;
		border-bottom: 1px solid #dcdcdc;
		.checkbox {
			position: relative;
			flex-shrink: 0;
			width: 40px;
			height: 40px;
			margin-right: 20px;
			background-color: #f8f8f8;
			box-shadow: 1px 0 #979797 inset, 0 1px #979797 inset, 0 -1px #979797 inset, -1px 0 #979797 inset;
			border-radius: 50%;
			.icon-check{
				position: absolute;
				left: 0;
				top: 0;
				background-image:url(http://47.98.119.130/test/yami/selectred2.svg) ;
				display: inline-block;
				width: 40px;
				height: 40px;
				background-size: 100% 100%;
			}
		}
		.cart-item-content {
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			-webkit-user-select: none;
			-moz-user-focus: none;
			-moz-user-select: none;
			text-decoration: none;
			display: flex;
			.goods-img {
				flex-shrink: 0;
				width: 226px;
				height: 154px;
				margin-right: 32px;
			}
			.cart-item-intro {
				display: flex;
				flex-direction: column;
				width: 350px;
				.cart-item-title {
					font-size: 32px;
					width: 100%;
					height: 44px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #4a4a4a;
					line-height: 44px;
				}
				.sub-title {
					font-size: 28px;
					color: #67666b;
					line-height: 40px;
					height: 40px;
					margin-bottom: 8px;
				}
				.price {
					height: 40px;
					margin-bottom: 20px;
					font-size: 28px;
					color: #ef364e;
				}
				.goods-ctrl {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.goods-count {
						display: flex;
						justify-content: space-between;
						width: 234px;
						height: 48px;
						.ctrl-add,
						.ctrl-minus {
							flex-shrink: 0;
							width: 72px;
							height: 48px;
							line-height: 48px;
							border-radius: 36px;
						}
						.goods-num {
							font-size: 36px;
							color: #000;
							line-height: 48px;
						}
					}
					.icon-del {
						width: 32px;
						height: 36px;
						margin: 0 10px;
					}
				}
			}
		}
	}
</style>